<template>
  <div id="mult">
    <div class="row" id="category_div">
      <select id="category">
        <option value="全自动洗衣机" selected>全自动洗衣机</option>
        <option value="冰箱">冰箱</option>
        <option value="冷柜">冷柜</option>
      </select>
    </div>
    <div class="row" id="property_div">
      <label for="">三级指标</label>
      <span>
        <input type="text" value="" id="property">
        <div class="mult-list" id="multList"></div>
      </span>
    </div>
  </div>
</template>
<script>
import indexs from './mult.js'
import $ from 'jquery'
export default {
  name: "mult",
  data: () => ({

  }),
  mounted() {
    function setProperty(category) {
      var list = indexs[category]
      $("#multList").empty();
      console.log(list)
      var list1 = [];
      var list2 = {};
      for (var i in list) {
        for (var j in list[i]) {
          list1.push(list[i][j]);
          list2[j] = list[i][j].properties;
        }
      }
      console.log("list1", list1);
      console.log("list2", list2);
      var str = '';
      /*
      for (var i in list) {
        str += '<div class="">';
          str += '<a href="javascript:void(0);" class="select-item second-item">二级</a>';
          str += '<ul>';
            str += '<li><a href="javascript:void(0);" class="select-item third-item">三级</a></li>';
          str += '</ul>';
        str += '</div>';
      }
      */
     for (var i in list2) {
       str += '<div class="">';
       str += '<a href="javascript:void(0);" class="select-item second-item">' + i + '</a>';
       str += '<ul>';
       for (var j in list2[i]) {
         str += '<li><a href="javascript:void(0);" class="select-item third-item">' + list2[i][j] + '</a></li>';
       }
       str += '</ul>';
       str += '</div>';
     }

      $("#multList").append(str);
    }
    setProperty("全自动洗衣机")
    //do something after mounting vue instance
    $("#category").change(function () {
      console.log(this.value)
    })
    $("#property").click(function (event) {
      event.stopPropagation();
      $("#multList").show();
    })
    $(document).click(function () {
      $("#multList").hide();
    })
    $("#multList").click(function (event) {
      event.stopPropagation();
    })
  }
}
</script>
<style lang="scss">
#mult {
  padding: 30px;
  background: #5ED5D1;
}
#property_div,
#category_div {
  background: #ffffff;
  position: relative;
}
#property_div {
  width: 250px;
}
#multList {
  // display: none;
  width: 200px;
  background: #ffffff;
  position: absolute;
}
.select-item {
  width: 100%;
  display: block;
  color: #232222;
  &.selected {
    color: red;
  }
}
.second-item {
  border-bottom: 1px solid #000;
}
.third-item {
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>
